<div class="input-group" >
  <input id="ltags" type="text" class="form-control" autocomplete="off" style="width: 760px" name="taxonomies_tags">
</div>

<div class="dropdown">
  <button type="button" class="btn btn-info dropdown-toggle mt-1 mb-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-taxonomie">
    Taxonomie Selected
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-taxonomie"> <!-- TODO: make dropdown-scrollable -->
    <h6 class="dropdown-header">Taxonomie Tags</h6>
    <button class="dropdown-item" type="button" id="all-tags-taxonomies">All Tags <i class="fas fa-tags"></i></button>
    <button class="dropdown-item" type="button" id="all-tags-customs">Custom Tags <i class="fas fa-tag"></i></button>
    <div class="dropdown-divider"></div>
    {% for taxo in tags_selector_data['active_taxonomies'] %}
      <button class="dropdown-item" type="button" id="{{ taxo }}-id{{ loop.index0 }}">{{ taxo }}</button>
    {% endfor %}
  </div>
</div>

<div class="input-group">
  <input id="ltagsgalaxies" type="text" class="form-control" autocomplete="off" style="width: 760px" name="galaxies_tags">
</div>

<div class="dropdown">
  <button type="button" class="btn btn-info dropdown-toggle mt-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdown-galaxy">
    Galaxy Selected
  </button>
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-galaxy"> <!-- TODO: make dropdown-scrollable -->
    <h6 class="dropdown-header">Galaxy Tags</h6>
    <button class="dropdown-item" type="button" id="all-tags-galaxies">All Tags <i class="fas fa-tags"></i></button>
    <div class="dropdown-divider"></div>
    {% for galaxy in tags_selector_data['active_galaxies'] %}
      <button class="dropdown-item" type="button" id="{{ galaxy }}-idgalax{{ loop.index0 }}">{{ galaxy }}</button>
    {% endfor %}
  </div>
</div>



<!--
        <button class="btn btn-primary" onclick="tagsSelector()">
            <i class="fas fa-plus"></i>
            Add Tags
        </button>
 -->


<script>
var ltags;
var ltagsgalaxies;

$.getJSON("{{ url_for('tags_ui.get_all_taxonomies_customs_tags') }}",
    function(data) {
      {% if 'taxonomies_tags' in tags_selector_data %}
        var valueData = [
          {% for tag in tags_selector_data['taxonomies_tags'] %}
            '{{tag|safe}}',
          {%  endfor %}
        ];
      {% else %}
        var valueData = [];
      {% endif %}


      ltags = $('#ltags').tagSuggest({
        data: data,
        value: valueData,
        maxDropHeight: 200,
        name: 'ltags'
      });
    });

$.getJSON("{{ url_for('tags_ui.tag_galaxies_tags_enabled_json') }}",
  function(data) {
    {% if 'galaxies_tags' in tags_selector_data %}
      var valueData = [
        {% for tag in tags_selector_data['galaxies_tags'] %}
          '{{tag|safe}}',
        {%  endfor %}
      ];
    {% else %}
      var valueData = [];
    {% endif %}

    ltagsgalaxies = $('#ltagsgalaxies').tagSuggest({
      data: data,
      value: valueData,
      maxDropHeight: 200,
      name: 'ltagsgalaxies'
    });
  });

jQuery("#all-tags-taxonomies").click(function(e){
        //change input tags list
      $.getJSON("{{ url_for('tags_ui.get_all_taxonomies_customs_tags') }}",
        function(data) {
          ltags.setData(data)
      });
    });

jQuery("#all-tags-customs").click(function(e){
        //change input tags list
      $.getJSON("{{ url_for('tags_ui.tag_custum_tags_enabled_json') }}",
        function(data) {
          ltags.setData(data)
      });
    });

jQuery("#all-tags-galaxies").click(function(e){
      $.getJSON("{{ url_for('tags_ui.tag_galaxies_tags_enabled_json') }}",
        function(data) {
          ltagsgalaxies.setData(data)
      });
    });

{% for taxo in tags_selector_data['active_taxonomies'] %}
    jQuery("#{{ taxo }}-id{{ loop.index0 }}").click(function(e){
      $.getJSON("{{ url_for('tags_ui.tag_taxonomie_tags_enabled_json') }}?taxonomie={{ taxo }}",
        function(data) {
          ltags.setData(data)
  });
});
{% endfor %}

{% for galaxy in tags_selector_data['active_galaxies'] %}
    jQuery("#{{ galaxy }}-idgalax{{ loop.index0 }}").click(function(e){
      $.getJSON("{{ url_for('tags_ui.tag_galaxy_tags_enabled_json') }}?galaxy={{ galaxy }}",
        function(data) {
          ltagsgalaxies.setData(data)
  });
});
{% endfor %}

// function tagsSelector() {
//   var tags = ltags.getValue()
//   var tagsgalaxy = ltagsgalaxies.getValue()
//   window.location.replace("myurl?tags=" + tags + "&tagsgalaxies=" + tagsgalaxy);
//}
</script>
